<template>
  <div class="wrapper">
    <!-- 导航栏 -->

    <div class="header">
      <a-input-group>
        <a-space direction="vertical" size="large">
          <a-input-tag
            :max-tag-count="2"
            v-model="name"
            :style="{ width: '320px' }"
            placeholder="Please Enter"
            allow-clear
          />
        </a-space>
      </a-input-group>
      <a-button @click="handlePublish" type="primary">发送</a-button>
      <template v-if="userInfo?.role === 3">
        <a-button @click="myOld2" type="primary">我的养老院</a-button>
      </template>
      <template v-else>
        <a-button @click="myOld" type="primary">我加入的养老院</a-button>
      </template>
      <a-button @click="addOld" class="newOld" type="primary" status="success"
        >新建养老院</a-button
      >
    </div>

    <div class="body">
      <template v-for="item in dataList">
        <CardOld :item="item" :isJoin="true" />
      </template>
    </div>

    <a-modal
      width="auto"
      :visible="visibleNewOld"
      @ok="handleOk"
      @cancel="handleCancel"
      okText="Confirm"
      cancelText="Exit"
      unmountOnClose
    >
      <template #title> 新建养老院 </template>
      <div>
        <a-form
          :model="propsNewOld"
          :style="{ width: '600px' }"
          @submit="addOld"
        >
          <a-form-item field="name" tooltip="养老院名称" label="养老院名称">
            <a-input
              v-model="propsNewOld.name"
              placeholder="please enter your username..."
            />
          </a-form-item>
          <a-form-item field="location" label="地点">
            <a-input
              v-model="propsNewOld.location"
              placeholder="please enter your username..."
            />
          </a-form-item>
          <a-form-item field="restDescribe" label="描述">
            <a-input
              v-model="propsNewOld.restDescribe"
              placeholder="please enter your username..."
            />
          </a-form-item>
          <a-form-item field="cost" label="费用">
            <a-input
              v-model="propsNewOld.cost"
              placeholder="please enter your username..."
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <a-modal
      width="800px"
      :visible="visibleMyOld"
      @ok="handleOkMy"
      @cancel="handleCancelMy"
      okText="Confirm"
      cancelText="Exit"
      unmountOnClose
    >
      <template #title>
        <template v-if="userInfo?.role !== 3"> 我加入的养老院 </template>
        <template v-else> 我创建的养老院 </template>
      </template>
      <div style="overflow-y: scroll; height: 600px">
        <template v-for="item in myJoinOld">
          <CardOld :item="item" :isJoin="false" :myOld="myOld" />
        </template>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import comment from "@/components/common/comment/index.vue";
import modal from "@/components/common/modal/index.vue";
import { commonRequest } from "@/utils/request";
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { onMounted } from "vue";
import CardOld from "./CardOld.vue";
import {
  IconHeart,
  IconMessage,
  IconStar,
  IconStarFill,
  IconHeartFill,
} from "@arco-design/web-vue/es/icon";
import {
  getAllCommentsById,
  getCommunityArticleList,
  getListOfoldpeople,
  replyCommunityArticle,
  getAddNewOld,
  getJoinOld,
  getNowOld,
  getUserInfo,
  getYangLaoYuanCreateByMe,
} from "@/apis/oldman";

const modalVisible = ref(false);
const name = ref([]);
const like = ref(false);
const star = ref(false);
const subCommentStr = ref("");
const userInfo = ref(null);
const commentList = ref([]);
const subCommentList = ref([]);
const subCommentId = ref("");
const location = ref("");
const activeFilterType = ref("经验"); // TODO： 后面加一个筛选过滤

// 添加新养老院对话框
const visibleNewOld = ref(false);
const visibleMyOld = ref(false);
const addOld = () => {
  visibleNewOld.value = true;
};
const propsNewOld = ref({
  name: "养老院名字",
  location: "地点",
  restDescribe: "养老院描述",
  cost: 3000,
});
const handleOk = async () => {
  console.log("新建养老院", propsNewOld.value);
  await getAddNewOld(propsNewOld.value);
  handleCancel();
};
const handleCancel = () => {
  visibleNewOld.value = false;
};

// 养老院列表
const dataList = ref([]);

// 查询养老院
const handlePublish = async () => {
  let data = {};
  if (name.value[0]) {
    data.name = name.value[0];
  }
  if (name.value[1]) {
    data.location = name.value[1];
  }
  const res = await getListOfoldpeople(data);
  dataList.value = res.data.data;
};

// 已加入的养老院
const myJoinOld = ref([]);
const myOld = () => {
  visibleMyOld.value = true;
  getNowOld().then((res) => {
    // console.log(myJoinOld.value, "我的养老院");
    const data = res.data.data;
    if (data instanceof Array) {
      myJoinOld.value = res.data.data;
    }
  });
};
// 我的养老院
const myOld2 = () => {
  visibleMyOld.value = true;
  getYangLaoYuanCreateByMe().then((res) => {
    const data = res.data.data;
    if (data instanceof Array) {
      myJoinOld.value = res.data.data;
    }
  });
};

const handleOkMy = () => {
  visibleMyOld.value = false;
};
const handleCancelMy = () => {
  visibleMyOld.value = false;
};

const handleSubPublish = async () => {
  const data = {
    content: subCommentStr.value,
    communityId: +subCommentId.value,
  };

  const res = await replyCommunityArticle(data);

  if (res.data.code === 200) {
    Message.success("评论成功");
    subCommentStr.value = "";
    getSubComments(subCommentId.value);
  }
};

const handleReply = async (id: string) => {
  subCommentId.value = id;
  getSubComments(id);
  setModalVisible(true);
};

const setModalVisible = (visible: boolean) => {
  modalVisible.value = visible;
};

const onLikeChange = () => {
  like.value = !like.value;
};
const onStarChange = () => {
  star.value = !star.value;
};

const getComments = async () => {
  const res = await getCommunityArticleList();
  console.log("res", res);
  // const res = await commonRequest.get("/comments/select");
  commentList.value = res.data.data;
};

const getSubComments = async (id: string) => {
  const res = await getAllCommentsById({ id: +id });
  console.log("sub", res);
  subCommentList.value = res.data?.data ?? [];
};

onMounted(async () => {
  const res = await getUserInfo();
  userInfo.value = res.data.data;
  // userInfo.value = JSON.parse(userInfoJSON);
  handlePublish();
  getComments();
});
</script>

<style scoped>
.wrapper {
  height: calc(100vh - 80px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.header {
  display: flex;
  gap: 24px;
  padding: 24px;
}
.body {
  margin: 8px 24px;
  overflow-y: auto;
}

.sub-wrapper {
  min-height: 300px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.sub-footer {
  display: flex;
  gap: 8px;
}

.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}
.action:hover {
  background: var(--color-fill-3);
}
.newOld {
  margin-left: auto;
  margin-right: 120px;
}

.boxList {
  border: 1px solid black;
  padding: 10px;
}
</style>
